/**
 * Created by lixinkun on 2017/5/23.
 */
import React, {Component, PropTypes} from 'react';
import {StyleSheet, View, Text, Image, TouchableHighlight, Alert} from 'react-native';
import BackPageComponent from '../../components/BackPageComponent';
import NavigationBar from '../../components/NavigationBar';
import theme from '../../constants/theme';
import Icon from 'react-native-vector-icons/Ionicons';
import {connect} from 'react-redux';
import px2dp from '../../utils/px2dp';
import AboutAuthorPage from './AboutAuthorPage';

class AboutGankPage extends BackPageComponent{
    render() {
        const{pageBackgroundColor, titleColor, subTitleColor, segmentColor,
            rowItemBackgroundColor, arrowColor, tabIconColor} = this.props;
        return (
            <View style={[styles.container, {backgroundColor: pageBackgroundColor}]}>
                <NavigationBar
                    title="关于Gank.io"
                    isBtnOnLeft={true}
                    leftBtnIcon='arrow-back'
                    leftBtnPress={this._handleBack.bind(this)}
                />
                <View style={styles.titleContainer}>
                    <Image style={styles.image} source={require('../../assets/icon.png')}/>
                    <Text style={styles.gank}>Gank.io</Text>
                    <Text style={[styles.version, {color: subTitleColor}]}>v1.0.1</Text>
                </View>
                <View style={[styles.itemContainer, {borderTopColor: segmentColor, backgroundColor: rowItemBackgroundColor}]}>
                    <Item title="简介" titleColor={titleColor} arrowColor={arrowColor} segmentColor={segmentColor} onPress={this._itemPress.bind(this, 1)}/>
                    <Item title="致谢" titleColor={titleColor} arrowColor={arrowColor} segmentColor={segmentColor} onPress={this._itemPress.bind(this, 2)}/>
                    <Item title="关于作者" titleColor={titleColor} arrowColor={arrowColor} segmentColor={segmentColor} onPress={this._itemPress.bind(this, 3)}/>
                </View>
            </View>
        )
    }

    _itemPress(id) {
        switch(id){
            case 1:
                Alert.alert('简介','每日分享妹子图和技术干货，还有供大家中午休息的休闲视频');
                break;
            case 2:
                Alert.alert('致谢','感谢Gank.io提供API支持');
                break;
            case 3:
                this.props.navigator.push({
                    component: AboutAuthorPage
                });
                break;
            default:
                throw new Error("item press error");
        }
    }
}

class Item extends Component{
    static propTypes = {
        title: PropTypes.string.isRequired,
        titleColor: PropTypes.string,
        arrowColor: PropTypes.string,
        segmentColor: PropTypes.string,
        onPress: PropTypes.func,
    }

    render() {
        const {title, titleColor, arrowColor, segmentColor, onPress} = this.props;
        return (
            <TouchableHighlight
                onPress={onPress}
                underlayColor={theme.touchableHighlightUnderlayColor}
            >
                <View style={[styles.cell, {borderBottomColor: segmentColor}]}>
                    <Text style={{color: titleColor}}>{title}</Text>
                    <Icon name="ios-arrow-forward" color={arrowColor} size={px2dp(18)}/>
                </View>
            </TouchableHighlight>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: theme.toolbar.paddingTop
    },

    itemContainer: {
        marginTop: px2dp(8),
        //指定边界线的宽度
        borderTopWidth: theme.segment.width,
    },

    image: {
        width: px2dp(60),
        height: px2dp(60),
        resizeMode: 'contain',
    },

    gank: {
        marginTop: px2dp(8),
        fontSize: px2dp(18),
    },

    version: {
        marginTop: px2dp(8),
        fontSize: px2dp(16),
    },

    titleContainer: {
        marginTop: px2dp(50),
        alignItems: 'center',
    },

    cell: {
        paddingLeft: px2dp(20),
        paddingRight: px2dp(20),
        justifyContent: 'space-between',
        height: px2dp(40),
        width: theme.screenWidth,
        alignItems: 'center',
        flexDirection: 'row',
        borderBottomWidth: theme.segment.width,

    },
});

const mapStateToProps = (state) => {
    return {
        pageBackgroundColor: state.settingState.colorScheme.pageBackgroundColor,
        segmentColor: state.settingState.colorScheme.segmentColor,
        titleColor: state.settingState.colorScheme.titleColor,
        subTitleColor: state.settingState.colorScheme.subTitleColor,
        rowItemBackgroundColor: state.settingState.colorScheme.rowItemBackgroundColor,
        arrowColor: state.settingState.colorScheme.arrowColor,
        tabIconColor: state.settingState.colorScheme.tabIconColor
    }
}

export default connect(mapStateToProps)(AboutGankPage);